<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>网页换肤</title>
  <style>
    body, ul, li {
      margin: 0;
      padding: 0;
    }

    html, body {
      height: 100%;
    }

    body {
      font: 12px/1.5 Tahoma;
    }

    li {
      list-style-type: none;
    }

    a:link,
    a:visited {
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }

    #outer {
      width: 500px;
      margin: 0 auto;
      overflow: hidden;
      zoom: 1;
    }

    #skin,
    #nav {
      overflow: hidden;
      zoom: 1;
    }

    #skin {
      margin: 10px 0;
    }

    #skin li {
      float: left;
      width: 6px;
      height: 6px;
      cursor: pointer;
      overflow: hidden;
      margin-right: 10px;
      text-indent: -9999px;
      border-width: 4px;
      border-style: solid;
    }

    #skin li.current {
      background: #fff !important;
    }

    #red {
      border-color: red;
      background: red;
    }

    #green {
      border-color: green;
      background: green;
    }

    #black {
      border-color: black;
      background: black;
    }

    #nav {
      border: 1px solid #fff;
    }

    #nav li {
      float: left;
      width: 82px;
      line-height: 25px;
      text-align: center;
      border-right: 1px solid #fff;
    }

    #nav li.last {
      width: 83px;
      border-right-width: 0;
    }

    #nav li a {
      color: #fff;
    }
  </style>
  <link href="../../../src/css/green.css" rel="stylesheet" type="text/css"/>
  <script>
    window.onload = function () {
      var oLink = document.getElementsByTagName("link")[0];
      var oSkin = document.getElementById("skin").getElementsByTagName("li");

      for (var i = 0; i < oSkin.length; i++) {
        oSkin[i].onclick = function () {
          for (var p in oSkin) oSkin[p].className = "";
          this.className = "current";
          oLink['href'] = '../../../src/css/' + this.id + ".css";
        }
      }

    };
  </script>
</head>

<body>
<div id="outer">
  <ul id="skin">
    <li id="red" title="红色">红</li>
    <li id="green" class="current" title="绿色">绿</li>
    <li id="black" title="黑色">黑</li>
  </ul>

  <ul id="nav">
    <li><a href="javascript:;">新闻</a></li>
    <li><a href="javascript:;">娱乐</a></li>
    <li><a href="javascript:;">体育</a></li>
    <li><a href="javascript:;">电影</a></li>
    <li><a href="javascript:;">音乐</a></li>
    <li class="last">
      <a href="javascript:;">旅游</a>
    </li>
  </ul>
</div>
</body>

</html>
